<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <!-- <div class="ccui-search-wrapper"> -->
      <el-search
        ref="search"
        :formProp="formData"
        @search="search"
        @change="change"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isFocus === 1 ? 'table-top-active' : 'table-top'"
            size="mini"
            >全部 ({{ totalNum }})</el-button
          >
        </div>
        <el-export-button
          class="export-button"
          @export-excel="handlExport"
          @export-pdf="exportPdf"
          style="display: inline-block; position: absolute; right: 0; top: 0"
        ></el-export-button>

        <template slot="search">
          <el-input
            v-model="formData.acceptanceName"
            clearable
            searchLabel="验收单名称"
            @blur="handleTrim('acceptanceName')"
            placeholder="请输入验收单名称模糊查询"
          ></el-input>
          <el-input
            v-model="formData.acceptanceNumber"
            clearable
            searchLabel="验收单编号"
            placeholder="请输入验收单编号模糊查询"
          ></el-input>
          <el-input
            v-model="formData.orderNumber"
            clearable
            searchLabel="订单编号"
            placeholder="请输入订单编号模糊查询"
          ></el-input>
          <el-input
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
          ></el-input>
          <el-input
            v-model="formData.categoryName"
            clearable
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('categoryName')"
          ></el-input>
          <el-input
            v-model="formData.supplier"
            clearable
            searchLabel="供应商名称"
            placeholder="请输入供应商名称模糊查询"
            @blur="handleTrim('supplier')"
          ></el-input>
          <el-input
            v-model="formData.acceptor"
            clearable
            searchLabel="验收人"
            placeholder="请输入验收人模糊查询"
          ></el-input>
          <el-select
            v-model="formData.acceptanceTypeCode"
            clearable
            searchLabel="验收类型"
            class="ccui-form-longInput"
            placeholder="请选择验收类型查询"
            slot="searchItem3"
          >
            <el-option
              v-for="(item, index) in basuomList"
              :key="index"
              :label="item.dicValue"
              :value="item.dicKey"
            ></el-option>
          </el-select>
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.acceptanceName"
          clearable
          searchLabel="验收单名称"
          placeholder="请输入验收单名称模糊查询"
          slot="searchItem1"
        ></el-input>
        <el-input
          v-model="formData.acceptanceNumber"
          clearable
          searchLabel="验收单编号"
          placeholder="请输入验收单编号模糊查询"
          slot="searchItem2"
        ></el-input>
        <el-input
          v-model="formData.orderNumber"
          clearable
          searchLabel="订单编号"
          placeholder="请输入订单编号模糊查询"
          slot="searchItem3"
        ></el-input>
        <el-input
          v-model="formData.reportInOrgName"
          clearable
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          slot="searchItem4"
        ></el-input>
        <el-input
          v-model="formData.categoryName"
          clearable
          searchLabel="分类名称"
          placeholder="请输入分类名称模糊查询"
          slot="searchItem5"
        ></el-input>
        <el-input
          v-model="formData.supplier"
          clearable
          searchLabel="供应商名称"
          placeholder="请输入供应商名称模糊查询"
          slot="searchItem6"
        ></el-input>
        <el-input
          v-model="formData.acceptor"
          clearable
          searchLabel="验收人"
          placeholder="请输入验收人模糊查询"
          slot="searchItem7"
        ></el-input>
        <el-select
          v-model="formData.acceptanceTypeCode"
          clearable
          searchLabel="验收类型"
          class="ccui-form-longInput"
          placeholder="请选择验收类型查询"
          slot="searchItem8"
        >
          <el-option
            v-for="(item, index) in basuomList"
            :key="index"
            :label="item.dicValue"
            :value="item.dicKey"
          ></el-option>
        </el-select>
      </el-search>
    </div>
    <!-- 表格数据 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :cell-style="cellStyle"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
      >
        <!-- max-height="20000" -->
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column type="index" width="60" label="序号" fixed>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          >
            <template slot-scope="scope">
              {{ scope.row[table.prop] }}
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="ccui-table-footer" v-show="totalNum > 0">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="getLocalPageSize()"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @prev-click="handlePrev"
            @next-click="handleNext"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
          >
            确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getPower from "@/basa/utils/getPower.js";
import { listPageAcceptanceCert } from "../api/item-list";
import { formatNumber } from "@/basa/utils";
import {
  setSessionItem,
  removeSessionItem,
  getSessionItem,
  ishasAgentId
} from "@/basa/utils";
import { detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";
export default {
  name: "listquery-item-list",
  mixins: [getPower],
  data() {
    return {
      // 高级搜索数据 start
      formData: {
        acceptanceNumber: "",
        orderNumber: "",
        reportInOrgName: "",
        categoryName: "",
        acceptanceType: "",
        supplier: "",
        acceptor: ""
      },
      // 高级搜索提交数据
      isShowSearch: true,
      isFocus: 1,
      totalNum: 0,
      // 在场设备表格数据
      tableColumnData: [
        {
          label: "验收单编号",
          prop: "acceptanceNumber",
          width: "130",
          fixed: true
        },
        {
          label: "验收单名称",
          prop: "acceptanceName",
          width: "130",
          fixed: true
        },

        {
          label: "订单编号",
          prop: "orderNumber",
          width: "130"
        },
        {
          label: "合同编号",
          prop: "contractNumber",
          width: "130",
          fixed: true
        },
        {
          label: "填报单位",
          prop: "reportInOrgName",
          width: "200"
        },
        {
          label: "供应商",
          prop: "supplier",
          width: "200"
        },
        {
          label: "验收人",
          prop: "acceptor",
          width: "100"
        },
        {
          label: "分类名称",
          prop: "categoryName",
          width: "100"
        },
        {
          label: "验收数量",
          prop: "acceptanceCurrentNumber",
          width: "80"
        },
        {
          label: "实际验收数量",
          prop: "currentAcceptanceEndNumber",
          width: "100"
        },
        {
          label: "退货数量",
          prop: "bowOutCurrentNumber",
          width: "80"
        },
        // {
        //   label: "到货地点",
        //   prop: "arrivalPlace",
        //   width: 130
        // },
        {
          label: "验收类型",
          prop: "acceptanceType",
          width: "100"
        }
      ],
      // 表格数据
      tableData: [],
      excelExport: [],
      excelData: [],
      // 验收类型
      basuomList: [
        {
          dicValue: "按发货单验收",
          dicKey: "1"
        },
        {
          dicValue: "按订单验收",
          dicKey: "2"
        },
        {
          dicValue: "按合同验收",
          dicKey: "3"
        }
      ],
      // 验收类型编码
      acceptanceTypeCode: "",
      // 列表
      deviceList: {
        acceptanceNumber: "",
        orderNumber: "",
        reportInOrgName: "",
        categoryName: "",
        acceptanceType: "",
        pageNo: this.getLocalPageNo(), // 页数
        pageSize: this.getLocalPageSize() // 每页的条数
      },
      tableName: this.tableList.accountList, // 表格命名
      pageNoCode: 1,
      listLoadingParams: { isShowPageLoading: true, submitStatus: 1 }
    };
  },
  created() {
    this.getList();
  },
  activated() {
    // this.getList();
    this.$refs.search.resetForm();
    this.search(this.formData);
  },
  methods: {
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    //导出全部
    exportPdf() {
      detailExport({
        ...this.deviceList,
        pageNo: 1,
        pageSize: 3000,
        ...this.listLoadingParams,
        type: "acceptancecert/accountExport",
        businessType: "1"
      }).then(res => {
        exportData(res);
      });
    },

    //导出当前
    handlExport() {
      detailExport({
        ...this.deviceList,
        pageNo: 1,
        pageSize: 3000,
        ...this.listLoadingParams,
        type: "acceptancecert/accountExport",
        businessType: "1"
      }).then(res => {
        exportData(res);
      });
    },
    // 高级搜索展开按钮
    search(searchData) {
      // console.log(searchData, "搜索");
      searchData.pageNo = this.getLocalPageNo();
      searchData.pageSize = this.getLocalPageSize();
      // console.log(searchData, "搜索");
      this.deviceList = JSON.parse(JSON.stringify(searchData));
      this.getList(this.deviceList);
    },
    change(index, key, value) {
      const formDataKeys = Object.keys(this.formData);
      formDataKeys.map(_ => {
        if (_ !== key) this.formData[_] = "";
      });
    },
    // 默认显示多少条
    getLocalPageSize() {
      return getSessionItem("pageSize", this.tableList.accountList) || 10;
    },
    // 读取当前页缓存
    getLocalPageNo() {
      let localData = getSessionItem("pageNo", this.tableName);
      return (localData && localData.pageNo) || 1;
    },

    // 上一页
    handlePrev() {
      --this.deviceList.pageNo;
      this.getList();
    },
    // 下一页
    handleNext() {
      ++this.deviceList.pageNo;
      this.getList();
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.deviceList.pageNo = 1;
      // this.pageNoCode = 1;
      if (val !== "none") {
        this.deviceList.pageSize = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.getList();
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.deviceList.pageNo = val;
      this.getList();
    },
    // 单元格点击
    cellClick(r, column) {
      // console.log(r, r.id, column, r.acceptanceType, 666);
      if (column.label === "验收单编号") {
        this.$router.push(
          `/checkManagement/acceptanceAccount/item-detail/${r.id}`
        );
        // this.$router.push({
        //   path: `/checkmanagement/acceptanceAccount/item-detail/${r.id}`,
        //   query: {
        //     acceptanceTypeCode: r.acceptanceTypeCode
        //   }
        // });
      }
    },
    // 根据返回状态显示不同的文字颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (["acceptanceNumber"].includes(column.property)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },
    handleSelectionChange(data) {
      // console.log(data, "多选");
      this.selection = data;
    },
    // 列表数据请求
    getList(searchData = this.deviceList) {
      listPageAcceptanceCert({
        ...searchData,
        ...this.listLoadingParams,
        businessType: "1"
      }).then(res => {
        res.data.data.rows = res.data.data.rows.map(item => ({
          ...item,
          acceptanceCurrentNumber: formatNumber(
            item.acceptanceCurrentNumber,
            3
          ),
          currentAcceptanceEndNumber: formatNumber(
            item.currentAcceptanceEndNumber,
            3
          ),
          bowOutCurrentNumber: formatNumber(item.bowOutCurrentNumber, 3)
        }));
        this.totalNum = res.data.data.recordsTotal;
        this.tableData = res.data.data.rows;
        // this.excelData = this.tableData;
      });
    },
    beforeRouteLeave(to, from, next) {
      // console.log(111);
      removeSessionItem("pageNo");
      for (var key in this.$vnode.parent.componentInstance.cache) {
        delete this.$vnode.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
      next();
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-search .el-searchs-box {
  margin-right: 70px;
}
</style>
